<template>
  <n-card class="nutrition-summary-card" title="营养成分汇总">
      <!-- 主要营养素 -->
      <div class="main-nutrients">
        <div class="nutrient-item energy">
          <div class="nutrient-icon">
            ⚡
          </div>
          <div class="nutrient-info">
            <span class="nutrient-label">能量</span>
            <span class="nutrient-value">{{ nutrition.energy_kcal }} 千卡</span>
            <span v-if="showPercentage" class="nutrient-percentage">
              {{ getPercentage('energy_kcal') }}%
            </span>
          </div>
        </div>

        <div class="nutrient-item protein">
          <div class="nutrient-icon">
            💪
          </div>
          <div class="nutrient-info">
            <span class="nutrient-label">蛋白质</span>
            <span class="nutrient-value">{{ nutrition.protein_g }} g</span>
            <span v-if="showPercentage" class="nutrient-percentage">
              {{ getPercentage('protein_g') }}%
            </span>
          </div>
        </div>

        <div class="nutrient-item fat">
          <div class="nutrient-icon">
            🥤
          </div>
          <div class="nutrient-info">
            <span class="nutrient-label">脂肪</span>
            <span class="nutrient-value">{{ nutrition.fat_g }} g</span>
            <span v-if="showPercentage" class="nutrient-percentage">
              {{ getPercentage('fat_g') }}%
            </span>
          </div>
        </div>

        <div class="nutrient-item carb">
          <div class="nutrient-icon">
            🌿
          </div>
          <div class="nutrient-info">
            <span class="nutrient-label">碳水化合物</span>
            <span class="nutrient-value">{{ nutrition.carb_g }} g</span>
            <span v-if="showPercentage" class="nutrient-percentage">
              {{ getPercentage('carb_g') }}%
            </span>
          </div>
        </div>
      </div>

      <!-- 详细营养素 -->
      <div class="detailed-nutrients" v-if="showDetailed">
        <h4>详细营养素</h4>
        <div class="nutrient-grid">
          <div class="nutrient-detail">
            <span class="label">膳食纤维</span>
            <span class="value">{{ nutrition.fiber_g }} g</span>
          </div>
          <div class="nutrient-detail">
            <span class="label">钠</span>
            <span class="value">{{ nutrition.sodium_mg }} mg</span>
          </div>
          <div class="nutrient-detail">
            <span class="label">钙</span>
            <span class="value">{{ nutrition.calcium_mg }} mg</span>
          </div>
          <div class="nutrient-detail">
            <span class="label">铁</span>
            <span class="value">{{ nutrition.iron_mg }} mg</span>
          </div>
          <div class="nutrient-detail">
            <span class="label">维生素C</span>
            <span class="value">{{ nutrition.vitamin_c_mg }} mg</span>
          </div>
        </div>
      </div>

      <!-- 营养素比例图表 -->
      <div class="nutrition-chart" v-if="showChart">
        <h4>营养素比例</h4>
        <div class="chart-container">
          <div class="chart-bar">
            <div class="bar-segment protein" :style="{ width: proteinPercentage + '%' }"></div>
            <div class="bar-segment fat" :style="{ width: fatPercentage + '%' }"></div>
            <div class="bar-segment carb" :style="{ width: carbPercentage + '%' }"></div>
          </div>
          <div class="chart-legend">
            <div class="legend-item">
              <span class="legend-color protein"></span>
              <span>蛋白质 {{ proteinPercentage }}%</span>
            </div>
            <div class="legend-item">
              <span class="legend-color fat"></span>
              <span>脂肪 {{ fatPercentage }}%</span>
            </div>
            <div class="legend-item">
              <span class="legend-color carb"></span>
              <span>碳水 {{ carbPercentage }}%</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 其他营养素 -->
      <div class="other-nutrients" v-if="otherNutrients && otherNutrients.length > 0">
        <h4>其他营养素</h4>
        <div class="nutrient-grid">
          <div v-for="nutrient in otherNutrients" :key="nutrient.nutrient_id" class="nutrient-detail">
            <span class="label">
              {{ nutrient.name_zh }}
              <n-tag v-if="nutrient.rich" type="info" size="small" style="margin-left: 4px;">富含</n-tag>
            </span>
            <span class="value">{{ nutrient.amount }} {{ nutrient.unit }}</span>
          </div>
        </div>
      </div>
  </n-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NTag } from 'naive-ui'
import type { NutritionSummary, OtherNutrient } from '@/types'
import { calculateNutritionPercentage } from '@/utils/nutrition'

interface Props {
  nutrition: NutritionSummary
  otherNutrients?: OtherNutrient[]
  showPercentage?: boolean
  showDetailed?: boolean
  showChart?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showPercentage: false,
  showDetailed: true,
  showChart: true
})

// 计算营养素占推荐摄入量的百分比
const nutritionPercentages = computed(() => {
  return calculateNutritionPercentage(props.nutrition)
})

const getPercentage = (nutrient: keyof NutritionSummary) => {
  return nutritionPercentages.value[nutrient] || 0
}

// 计算三大营养素的热量比例
const totalCalories = computed(() => {
  const proteinCal = props.nutrition.protein_g * 4
  const fatCal = props.nutrition.fat_g * 9
  const carbCal = props.nutrition.carb_g * 4
  return proteinCal + fatCal + carbCal
})

const proteinPercentage = computed(() => {
  if (totalCalories.value === 0) return 0
  return Math.round((props.nutrition.protein_g * 4 / totalCalories.value) * 100)
})

const fatPercentage = computed(() => {
  if (totalCalories.value === 0) return 0
  return Math.round((props.nutrition.fat_g * 9 / totalCalories.value) * 100)
})

const carbPercentage = computed(() => {
  if (totalCalories.value === 0) return 0
  return Math.round((props.nutrition.carb_g * 4 / totalCalories.value) * 100)
})
</script>

<style scoped>
.nutrition-summary-card {
  margin: 16px 0;
}

.main-nutrients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.nutrient-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: var(--ion-color-light);
}

.nutrient-item.energy {
  background: rgba(255, 107, 107, 0.1);
}

.nutrient-item.protein {
  background: rgba(78, 205, 196, 0.1);
}

.nutrient-item.fat {
  background: rgba(69, 183, 209, 0.1);
}

.nutrient-item.carb {
  background: rgba(150, 206, 180, 0.1);
}

.nutrient-icon {
  margin-right: 12px;
  font-size: 24px;
}

.nutrient-item.energy .nutrient-icon {
  color: #FF6B6B;
}

.nutrient-item.protein .nutrient-icon {
  color: #4ECDC4;
}

.nutrient-item.fat .nutrient-icon {
  color: #45B7D1;
}

.nutrient-item.carb .nutrient-icon {
  color: #96CEB4;
}

.nutrient-info {
  display: flex;
  flex-direction: column;
}

.nutrient-label {
  font-size: 12px;
  color: var(--ion-color-medium);
  margin-bottom: 2px;
}

.nutrient-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--ion-color-dark);
}

.nutrient-percentage {
  font-size: 11px;
  color: var(--ion-color-medium);
  margin-top: 2px;
}

.detailed-nutrients h4 {
  margin: 0 0 12px 0;
  color: var(--ion-color-medium);
  font-size: 14px;
  font-weight: 600;
}

.nutrient-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.nutrient-detail {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--ion-color-light);
  border-radius: 6px;
}

.nutrient-detail .label {
  font-size: 13px;
  color: var(--ion-color-medium);
}

.nutrient-detail .value {
  font-size: 13px;
  font-weight: 500;
  color: var(--ion-color-dark);
}

.nutrition-chart {
  margin-top: 24px;
}

.nutrition-chart h4 {
  margin: 0 0 12px 0;
  color: var(--ion-color-medium);
  font-size: 14px;
  font-weight: 600;
}

.chart-container {
  margin-top: 12px;
}

.chart-bar {
  display: flex;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ion-color-light);
  margin-bottom: 12px;
}

.bar-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.bar-segment.protein {
  background: #4ECDC4;
}

.bar-segment.fat {
  background: #45B7D1;
}

.bar-segment.carb {
  background: #96CEB4;
}

.chart-legend {
  display: flex;
  justify-content: space-around;
  font-size: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 6px;
}

.legend-color.protein {
  background: #4ECDC4;
}

.legend-color.fat {
  background: #45B7D1;
}

.legend-color.carb {
  background: #96CEB4;
}

.other-nutrients {
  margin-top: 24px;
}

.other-nutrients h4 {
  margin: 0 0 12px 0;
  color: var(--ion-color-medium);
  font-size: 14px;
  font-weight: 600;
}
</style>
